<template>
  <div class="canvas-top" :class="{ 'top-read-only': graphData.onlyRead }">
    <div v-if="graphData.canvasRoom === 'detail'" class="mn-btn">
      <el-button type="primary" plain @click="back">
        <el-icon style="margin-right: 2px"><ArrowLeft /></el-icon>
        返回
      </el-button>
    </div>
    <div class="mn-search" v-if="graphData.onlyRead">
      <el-input
        v-model.trim="searchName"
        placeholder="搜索员工姓名"
        class="input-with-select"
        @keyup.enter="search"
      >
        <template #append>
          <el-button
            :class="{ 'loading-btn': searchLoading }"
            :icon="searchLoading ? Loading : Search"
            @click="search"
          />
        </template>
      </el-input>
    </div>
    <div :id="graphData.toolbarId"></div>
    <div class="mn-tips">
      <span>[ctrl + 鼠标滚轮 = 缩放]</span>
      <template v-if="!graphData.onlyRead">
        <span>[shift + 鼠标左键 = 多选]</span>
        <span>[shift + 左键拖动 = 框选]</span>
        <span>[(ctrl + 退格键) 或 delete = 删除选中节点]</span>
        <span>[ctrl + 方向键 = 平移选中节点]</span>
        <span>[ctrl + shift + v = 复制并粘贴选中节点]</span>
      </template>
    </div>
  </div>
  <SearchList
    :dialogVisible="dialogVisible"
    :searchList="searchList"
    @close="dialogVisible = false"
  />
</template>

<script setup>
import SearchList from './SearchList';
import { Loading, Search, ArrowLeft } from '@element-plus/icons-vue';
import { ElMessage } from 'element-plus';
import { searchSeat } from '@/api/seats';
import { refreshUserNode } from '../common';
import useUserStore from '@/store/modules/user';
const router = useRouter();
const props = defineProps({
  graphData: {
    type: Object,
    default: () => {}
  }
});

// 返回
function back() {
  router.back();
}

// 查找
const searchName = ref('');
const dialogVisible = ref(false);
const searchList = ref([]);
const searchLoading = ref(false);
async function search() {
  if (!searchName.value) return;
  searchList.value = [];
  searchLoading.value = true;
  try {
    const res = await searchSeat({ name: searchName.value });
    const resArr = res.data || [];
    resArr.forEach(room => {
      const room_custom_info = room.custom_info || {};
      refreshUserNode(room.nodes, useUserStore().userStruct);
      room.nodes?.forEach(node => {
        const node_custom_info = node.custom_info || {};
        const user_name = node_custom_info.user_name;
        if (user_name?.includes(searchName.value)) {
          searchList.value.push({
            ...node_custom_info,
            userAddress: room_custom_info.node_label,
            parent_node_id: room.id,
            nodeId: node.id
          });
        }
      });
    });
    if (!searchList.value.length) return ElMessage.error('查询结果为空');
    dialogVisible.value = true;
  } finally {
    searchLoading.value = false;
  }
}
</script>

<style lang="scss" scoped>
.canvas-top {
  height: 36px;
  display: flex;
  align-items: center;
  margin-bottom: 14px;
  :deep(.g6-component-toolbar) {
    user-select: none;
    position: relative;
    height: 36px;
    margin-right: 20px;
    width: 230px;
  }
}
.top-read-only {
  :deep(.g6-component-toolbar) {
    width: 156px;
    li:nth-child(1) {
      display: none;
    }
    li:nth-child(2) {
      display: none;
    }
  }
}

.mn-btn {
  margin-right: 20px;
}

.mn-tips {
  color: #aaa;
  font-size: 14px;
  span {
    margin-right: 14px;
    display: inline-block;
    word-wrap: break-word;
    white-space: normal;
    &:last-child {
      margin-right: 0;
    }
  }
}
.mn-search {
  margin-right: 20px;
  :deep(.el-input) {
    height: 36px;
    width: 180px;
  }
}
.loading-btn {
  animation: zxrotate 1s infinite linear;
}
@keyframes zxrotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
</style>
